<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>鸿包惠</span>
      <div class="right">
      </div>
    </div> -->
		<!-- <div class="kong"></div> -->
    <div class="list">
			<div class="boxt">
				<div class="info">
					<span>证书编号：</span><input type="text" v-model="num" placeholder="请输入证书编号">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><input type="text" v-model="name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="boxt">
				<div class="info">
					<span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</span><input type="text" v-model="phone" placeholder="请输入手机号">
				</div>
			</div>
			<div class="btn">
				<button class="affirm" @click="isoK()">确认</button>
				<button class="cancel" @click="back()">取消</button>
			</div>
		</div>
		<!-- 解债师资格 -->
		<div class="title">
			<div class="box">
				<div class="f"></div>
				<span>解债师资格</span>
				<div class="f"></div>
			</div>
		</div>
		<!-- 列表 -->
		<div class="chart">
			<div class="box">
				<div class="yuan">
					<span></span>
				</div>
				<div class="s"></div>
				<div class="bar">
					<div class="biao"></div>
					<div class="center">
						<div class="tt">
							<span>职责</span>
						</div>
						<div class="txt">
							<span>进行全国各地的个人，企业，银行，政府化解债务，整合全国资源，为361行服务</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="yuan">
					<span></span>
				</div>
				<div class="s"></div>
				<div class="bar">
					<div class="biao"></div>
					<div class="center">
						<div class="tt">
							<span>优势</span>
						</div>
						<div class="txt">
							<span>化解完成债事，可获得1~5%债权鸿宝</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="yuan">
					<span></span>
				</div>
				<div class="s"></div>
				<div class="bar">
					<div class="biao"></div>
					<div class="center">
						<div class="tt">
							<span>权限</span>
						</div>
						<div class="txt">
							<span>1.可成为股东</span><br>
							<span>1.可购买鸿宝惠商学院全国培训课程</span><br>
							<span>1.可获得购买鸿宝惠解债师专用车资格</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'identification',
  data () {
    return {
		num:'',
		name:'',
		phone:''
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
	},
	isoK(){
		if(!this.num){
			this.$dialog.toast({mes:'请输入证书编号'});
			return
		}
		if(!this.name){
			this.$dialog.toast({mes:'请输入姓名'});
			return
		}
		if(!this.phone){
			this.$dialog.toast({mes:'请输入手机号'});
			return
		}
		let self = this;
		let url = "/api/explain";
		self.httpPost(url,{user_id:this.myid,token:this.token,name:this.name,booknum:this.num,phone:this.phone},function(res) {
			if (res.code === 200) {
				self.$dialog.toast({mes:res.msg});  
				setTimeout(function () {
				 self.$router.go(-1);
				}, 1500);
			}else{
				self.$dialog.toast({mes:res.msg});
			}
		})
	}
  },
  created(){
    document.title = "解债师";
    this.token = localStorage.getItem('mytoken');
	this.myid = localStorage.getItem('myid');
    this.detail(); 
  },
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
  position: fixed;
}
.kong{
	width:100%;
	height:.92rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.list{
	width:100%;
	padding: 0 .3rem;
	background: #FFF;
}
.list .boxt{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	align-items: center;
	
}
.list .boxt .info{
	width:100%;
	height:100%;
	line-height: 1.4rem;
	border-bottom: 1px solid #eee;
}

.list .boxt .info span{
	font-size: .28rem;
	color:#707070;
}
.boxt span{
	font-size: .28rem;
	color:#333;
}
.boxt input{
	border:none;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	color: #9e9e9e; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
	color: #9e9e9e; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
	color: #9e9e9e; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	color: #9e9e9e; 
} 
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	padding: .2rem .2rem;
}
.btn .affirm{
	width: 1.18rem;
	height:.60rem;
	background: #e63f3f;
	border: none;
	border-radius: 5px;
	font-size: .28rem;
	color:#FFF;
}
.btn .cancel{
	width: 1.18rem;
	height:.60rem;
	background: #e7e6e9;
	border: none;
	border-radius: 5px;
	font-size: .28rem;
	color:#adadad;
	margin-left: .5rem;
}
.title{
	margin-top: .6rem;
	width:100%;
	display: flex;
	justify-content: center;
}
.title .box{
	width:35%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.box ~.box{
	margin-top: .3rem;
}
.title .box .f{
	width:.1rem;
	height:.1rem;
	background:#ee8834;
}
.title .box span{
	font-size: .30rem;
	color:#ee8834;
}
.chart{
	margin-top: .45rem;
	width:100%;
	padding: 0 .3rem;
}
.chart .box{
	position: relative;
	width:100%;
	height:2.05rem;
	background: #FFF;
}
.chart .box .yuan{
	width:.43rem;
	height:.43rem;
	border-radius: 50%;
	background: #ec6941;
	position: absolute;
	top:-.2rem;
	left: .3rem;
	text-align: center;
	line-height: .43rem;
}
.chart .box .s{
	width:.26rem;
	height:.26rem;
	border-radius: 50%;
	background: #eea159;
	position: absolute;
	top:-.011rem;
	left: .6rem;
	z-index: 999;
}
.chart .box .yuan span{
	font-size: .3rem;
	color: #FFF;
}
.chart .box .bar{
	width:100%;
	height:100%;
	position: relative;
	overflow: hidden;
	padding: .3rem .3rem;
}
.chart .box .bar .center{
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	align-items: center;
}
.chart .box .bar .center .tt{
	width:100%;
	display: flex;
	justify-content: center;
}
.chart .box .bar .center .tt span{
	font-size: .30rem;
	color:#ec6941;
}
.chart .box .bar .center .txt{
	width:100%;
	height:70%;
}
.chart .box .bar .center .txt span{
	font-size: .26rem;
	color:#707070;
}
.chart .box .bar .biao{
	position: absolute;
  right: -0.7rem;
  top: 1.7rem;
  transform: rotate(60deg);
  background: #ec6941;
  width: 1.8rem;
  height: 1.8rem;
  z-index: 999;
}

</style>



